<template>
  <div>

    <el-button type="primary" @click="showAddGoodsCategoryDialog">添加分类</el-button>

    <tree-table :data="categories"
                :columns="columns"
                :selection-type="false"
                :expand-type="false"
                show-index index-text="#" class="margin-top-20" border>
      <!--有效-->
      <template slot="isok" slot-scope="scope">
        <i v-if="scope.cat_delete"
           class="el-icon-error text-color-green"></i>
        <i v-else class="el-icon-success text-color-green"></i>
      </template>

      <!--排序-->
      <template slot="level" slot-scope="scope">
        <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag v-else-if="scope.row.cat_level === 1" type="warning">二级</el-tag>
        <el-tag v-else type="success">三级</el-tag>
      </template>

      <!--操作-->
      <template slot="operation" slot-scope="scope">
        <el-button @click="showEditGoodsCategory(scope.row)" type="warning" size="small" icon="el-icon-edit">编辑</el-button>
        <el-button @click="deleteGoodsCategory(scope.row)" type="danger" size="small" icon="el-icon-delete-solid">删除</el-button>
      </template>

    </tree-table>
    <div class="block">

      <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :page-sizes="[1, 5, 10, 20]"
              :current-page="queryInfo.pagenum"
              :page-size="queryInfo.pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total" class="margin-top-20">
      </el-pagination>
    </div>

    <!--添加分类 dialog-->
    <el-dialog title="添加分类" :visible.sync="addGoodsCategoryVisible" :before-close="addGoodsCategoryHandleClose" width="30%">
      <el-form ref="addGoodsCategoryRef" :model="addGoodsCategoryFormInfo" :rules="rules" label-width="100px">
        <!--分类名称-->
        <el-form-item label="商品分类名: " prop="cat_name">
          <el-input v-model="addGoodsCategoryFormInfo.cat_name" autocomplete="on"></el-input>
        </el-form-item>
        <!--分类等级-->
        <el-form-item label="分类父级: " prop="cat_level">
          <el-cascader
                  v-model="CategoriesValue"
                  :options="parentCategories"
                  :props="propsValue"
                  @change="parentCategoryhandleChange"
                  clearable style="width: 100%"></el-cascader>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addGoodsCategoryHandleClose">取 消</el-button>
        <el-button type="primary" @click="submitAddGoodsCategory">确 定</el-button>
      </div>
    </el-dialog>

    <!--修改分类 dialog-->
    <el-dialog title="修改分类" :visible.sync="editGoodsCategoryVisible" :before-close="editGoodsCategoryHandleClose" width="30%">
      <el-form ref="editGoodsCategoryRef" :model="editGoodsCategoryFormInfo" :rules="rules" label-width="100px">
        <!--分类名称-->
        <el-form-item label="商品分类名: " prop="cat_name">
          <el-input v-model="editGoodsCategoryFormInfo.cat_name" autocomplete="on"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editGoodsCategoryHandleClose">取 消</el-button>
        <el-button type="primary" @click="submitEditGoodsCategory">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>


<script>
  export default {
    name: "GoodsTable",
    data() {
      return {
        categories: [],
        queryInfo: {
          type: 3,
          pagenum: 1,
          pagesize: 20
        },
        total: 0,
        // columns
        columns: [
          {
            label: '分类名称',
            prop: 'cat_name'
          },
          {
            label: '是否有效',
            prop: 'cat_delete',
            // 以模板的形式渲染当前行
            type: 'template',
            // 模板名称
            template: 'isok'
          },
          {
            label: '排序',
            prop: 'cat_level',
            // 以模板的形式渲染当前行
            type: 'template',
            // 模板名称
            template: 'level'
          },
          {
            label: '操作',
            // 以模板的形式渲染当前行
            type: 'template',
            // 模板名称
            template: 'operation'
          }
        ],
        addGoodsCategoryVisible: false,
        editGoodsCategoryVisible: false,
        // 表单校验规则
        rules: {
          cat_name: [
            { required: true, message: '请输入商品分类', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],

        },
        addGoodsCategoryFormInfo: {
          cat_name: '',
          cat_pid: '',
          cat_level: '',
        },
        editGoodsCategoryFormInfo: {
          id: '',
          cat_name: '',
        },
        // 商品分类
        parentCategories: [], // 数据源
        CategoriesValue: [], // 存储
        propsValue: { // 属性配置
          expandTrigger: 'hover',
          value: 'cat_id',
          label: 'cat_name',
          children: 'children',
          checkStrictly: true,
        }
      }
    },
    methods: {
      getCategories() {
        this.$http.get('categories',{params: this.queryInfo}).then(result => {
          if (result.data.meta.status !== 200) return this.$message.error("获取商品分类失败!")
          // this.categories = result.data.data
          this.categories = result.data.data.result
          this.total = result.data.data.total
          return this.$message.success("获取商品分类成功!")
        })
      },
      handleSizeChange(newSize) {
        this.queryInfo.pagesize = newSize
        this.getCategories();
      },
      handleCurrentChange(newNum) {
        this.queryInfo.pagenum = newNum
        this.getCategories();
      },
      // 提交添加商品分类表单
      submitAddGoodsCategory() {
        this.$refs.addGoodsCategoryRef.validate(valid => {
          if (!valid) return
          this.$http.post('categories',this.addGoodsCategoryFormInfo).then(result => {
            if (result.data.meta.status !== 201) return this.$message.error('添加失败 , ' + result.data.meta.msg)
            this.getCategories()
            this.addGoodsCategoryVisible = false
            this.addGoodsCategoryHandleClose()
            return this.$message.success("添加成功!")
          })
        })
      },
      submitEditGoodsCategory(){
        this.$refs.editGoodsCategoryRef.validate(valid => {
          if (!valid) return
          this.$http.put(
              'categories/' + this.editGoodsCategoryFormInfo.id,
              {"cat_name" : this.editGoodsCategoryFormInfo.cat_name}
              ).then(result => {
                if (result.data.meta.status !== 200) return this.$message.error('修改失败, ' + result.data.meta.msg)
                this.getCategories()
                this.editGoodsCategoryVisible = false
                return this.$message.success('修改成功')
          })
        })
      },
      // 删除商品分类
      deleteGoodsCategory(category) {
        this.$http.delete('categories/' + category.cat_id).then(result => {
          if (result.data.meta.status !== 200) return this.$message.error('删除失败, ' + result.data.meta.msg)
          this.getCategories()
          return this.$message.success(result.data.meta.msg)
        })
      },
      // 展示添加商品分类对话框
      showAddGoodsCategoryDialog() {
        //获取1 2 级分类
        this.getParentGoodsCategory()
        this.addGoodsCategoryVisible = true
      },
      showEditGoodsCategory(category) {
        this.editGoodsCategoryVisible = true
        this.editGoodsCategoryFormInfo.id = category.cat_id
        this.editGoodsCategoryFormInfo.cat_name = category.cat_name
      },
      getParentGoodsCategory() {
        this.$http.get('categories',{ params: {type: 2} }).then(result => {
          if (result.data.meta.status !== 200) return this.$message.error("获取商品分类失败")
          //赋值
          this.parentCategories = result.data.data

        })
      },
      parentCategoryhandleChange() {
        if (this.CategoriesValue.length > 0) {
          this.addGoodsCategoryFormInfo.cat_level = this.CategoriesValue.length
          this.addGoodsCategoryFormInfo.cat_pid = this.CategoriesValue[this.CategoriesValue.length - 1]
        }else {
          this.addGoodsCategoryFormInfo.cat_level = 0
          this.addGoodsCategoryFormInfo.cat_pid = 0
        }
      },
      addGoodsCategoryHandleClose() {
        this.$refs.addGoodsCategoryRef.resetFields()
        this.CategoriesValue = []
        this.addGoodsCategoryVisible = false
      },
      editGoodsCategoryHandleClose() {
        this.$refs.editGoodsCategoryRef.resetFields()
        this.editGoodsCategoryFormInfo.id = ''
        this.editGoodsCategoryFormInfo.cat_name = ''
        this.editGoodsCategoryVisible = false

      },

    },
    created() {
      this.getCategories();
    }
  }//
</script>

<style scoped>

</style>